<template>
  <div>
    <div style="height:6vh;background-color:#fff;padding: 10px 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1)">
      <span style="line-height: 60px;font-size: 20px;color: #303133;">个人信息中心</span>
    </div>

    <!-- 主要信息卡片 -->
    <el-card class="main-card">
      <div class="user-header">
        <el-avatar :size="80" src="/imgs/userLogo.png"/>
        <div class="user-title">
          <h2 style="margin: 10px 0;color: #303133;">{{ userInfo.name }}</h2>
          <el-tag effect="dark" type="success">在职</el-tag>
        </div>
      </div>

      <el-divider content-position="left"><i class="el-icon-info"></i> 基本信息</el-divider>

      <el-row :gutter="30">
        <el-col :xs="24" :sm="12">
          <info-item icon="el-icon-user" label="用户ID" :value="userInfo.id"/>
          <info-item icon="el-icon-male" label="性别" :value="userInfo.gender || '未填写'"/>
          <info-item icon="el-icon-message" label="电子邮箱" :value="userInfo.email"/>
          <info-item icon="el-icon-postcard" label="身份证号" :value="userInfo.idCard"/> <!-- 修改此处图标 -->
        </el-col>
        <el-col :xs="24" :sm="12">
          <info-item icon="el-icon-connection" label="所属部门" :value="getDeptName(userInfo.departmentId)"/>
          <info-item icon="el-icon-user-solid" label="直接上级" :value="formatParent(userInfo.parentId)"/>
          <info-item icon="el-icon-mobile-phone" label="手机号码" :value="userInfo.phone"/>
          <info-item icon="el-icon-date" label="入职时间" :value="userInfo.entryDate"/>
        </el-col>
      </el-row>

      <el-divider content-position="left"><i class="el-icon-s-data"></i> 系统信息</el-divider>

      <el-row :gutter="20">
        <el-col :span="12">
          <info-item icon="el-icon-s-opportunity" label="职级" :value="formatLevel(userInfo.level)"/>
        </el-col>
        <el-col :span="12">
          <info-item icon="el-icon-time" label="创建时间" :value="userInfo.createTime"/>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { Message } from 'element-ui';

// 信息项组件
const InfoItem = {
  props: ['icon', 'label', 'value'],
  render(h) {
    return h('div', { class: 'info-item' }, [
      h('i', { class: this.icon, style: 'color: #409EFF; margin-right: 10px;' }),
      h('span', { style: 'color: #909399; min-width: 80px;' }, this.label + '：'),
      h('span', { style: 'color: #303133;' }, this.value)
    ])
  }
}

export default {
  components: { InfoItem },
  data() {
    return {
      userInfo: {
        ...this.$getUser(),
      },
      departmentOptions: [],
      employeeOptions: []
    }
  },
  mounted() {
    this.loadDepartments();
    this.loadAllEmployees();
  },
  methods: {
    loadDepartments() {
      axios.get(this.$BASE_URL+`/v1/department/list`)
          .then(res => {
            if (res.data.state === 2000) {
              this.departmentOptions = res.data.data;
            } else {
              Message.error(res.data.message);
            }
          })
          .catch(() => Message.error('部门加载失败'));
    },
    loadAllEmployees() {
      axios.get(this.$BASE_URL + '/v1/user/list')
          .then((res) => {
            if (res.data.state === 2000) {
              this.employeeOptions = res.data.data.userList;
            }
          });
    },
    getDeptName(deptId) {
      const dept = this.departmentOptions.find(d => d.id === deptId);
      return dept ? dept.name : '未知部门';
    },
    formatLevel(level) {
      const levels = {
        '10': '普通员工',
        '20': '部门主管',
        '30': '部门经理',
        '40': '总经理'
      };
      return levels[level] || level;
    },
    formatParent(parentId) {
      const parent = this.employeeOptions.find(emp => emp.id === parentId);
      return parent ? parent.name : '无';
    },
  }
}
</script>

<style scoped>
.main-card {
  margin: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.user-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(145deg, #f5f7fa 0%, #e6e9ed 100%);
  border-radius: 8px;
  margin-bottom: 30px;
}

.user-title {
  margin-left: 30px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin: 10px 0;
  background: #f8f9fa;
  border-radius: 6px;
  transition: all 0.3s;
}

.info-item:hover {
  transform: translateX(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-divider {
  margin: 30px 0;
}

.el-divider__text {
  background: white !important;
  font-size: 16px;
}
</style>